<!--
 * @Descripttion: 
 * @version: 
 * @Author: wangys
 * @Date: 2022-06-08 15:15:23
-->
<template>
  <div class="opertion-container">
    <ArticleItem></ArticleItem>
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
export default {
  name: 'Opertion',
  components: {
    ArticleItem
  },
  data() {
    return {
      currentPage: 0,
      total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="less" scoped>
.opertion-container {
  .footer {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }
}
</style>
